<%@ page language="java" import="java.util.*" pageEncoding="utf-8"%>
<!DOCTYPE html>
<html >
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>忘记密码</title>
<link rel="shortcut icon" href="images/favicon.ico" />
<link type="text/css" href="wtz/css/css.css" rel="stylesheet" />
<script src="wtz/jquery/jquery-2.1.1.js"></script>
<script src="wtz/js/Particleground.js"></script>
<style type="text/css">
    body{height:100%;background:#BAE4C1;overflow:hidden;}
    canvas{z-index:-1;position:absolute;}
    *{padding:0px;margin:0px;}
  .bg.blur{-webkit-filter:blur(6px);width:100%;}
  .popus5{width:400px;color:#000;;position:fixed;top:50%;left:50%;-webkit-transform:translate(-50%,-50%);font-family:"微软雅黑";padding:20px 0px;font-weight:bold;background-color:rgba(255,255,255,0.4);border-radius:18px;text-align:center;padding:30px 0px;box-shadow:0px 0px 10px rgba(0,0,0,0.4);display:none;z-index:10;}
  .popus5 div{width:220px;margin:32px 77px;}
  .popus5 div.btn5{width:80px;padding:5px 0px;color:#000;}
  .popus5 div.btn5.right{position:relative;color:#666;border:1px solid #666;}
  .popus5 div.btn5.right:hover{position:relative;color:#000;border:1px solid #000;}
  .mask{position:fixed;top:0px;left:0px;bottom:0px;right:0px;display:none;}
</style>
<script type="text/javascript">
var flag = 60;//60秒
function timer(){
    flag--;
    if(flag==0){
        $('#sendcode').get(0).disabled=false;//禁止按钮再次点击
        flag = 60;
        $('#sendcode').val('发送验证码');


    }else{
        $('#sendcode').val('重新发送('+ flag +')');
        $('#sendcode').get(0).disabled="disabled";//禁止按钮再次点击
        setTimeout("timer()",1000);
    }
}

$(document).ready(function() {
      //粒子背景特效
      $('body').particleground({
        dotColor: '#5cbdaa',
        lineColor: '#5cbdaa'
      });


    var ok=false;
    var code;
    //隐藏
    $('.btn').on('click',function(){
        $('.bg').removeClass('blur');
        $('.popus,.mask').hide();
    });

     //隐藏
    $('.btn5').on('click',function(){
        $('.bg').removeClass('blur');
        $('.popus5,.mask').hide();
    });


    //发送验证码按钮
    $('#sendcode').click(function(event) {

        $.ajax({
            type:'POST',
            url:'${pageContext.request.contextPath}/pwdManager.action?method=findEmail',
            data:{
                email:$('#myemail').val()
            },
            success:function(response,status,xhr){
              
              code=response;
              timer();
              // console.log(98)
              // $(this).addClass('blur');
              // $('.popus5,.mask').show();

            }
        });


    });

    //刷新验证码时间


    $('#mycode').keyup(function(event) {
      if(code!=$('#mycode').val()){
          ok=false;
      }else{
          ok=true;
      }
    });


    //验证码！
    $('#submit_btn').click(function(event) {

        if(ok){
          //跳转页面
          $('form').submit();
        }else{
          console.log(98)
          $(this).addClass('blur');
          $('.popus,.mask').show();
        }


    });
});



</script>
</head>

<body>

  <div class="content">
   <div class="web-width">
     <div class="for-liucheng">
      <div class="liulist for-cur"></div>
      <div class="liulist for-cur"></div>
      <div class="liulist"></div>
      <div class="liulist"></div>
      <div class="liutextbox">
       <div class="liutext for-cur"><em>1</em><br /><strong>填写账户名</strong></div>
       <div class="liutext for-cur"><em>2</em><br /><strong>验证身份</strong></div>
       <div class="liutext"><em>3</em><br /><strong>设置新密码</strong></div>
       <div class="liutext"><em>4</em><br /><strong>完成</strong></div>
      </div>
     </div><!--for-liucheng/-->

     <form action="${pageContext.request.contextPath}/user_manage/forgetPwd3.jsp" method="post" class="forget-pwd">
       <input type="hidden" id="myemail" name="email" value="${src_email}"/>
       <dl>为了你的帐号安全，请完成身份验证</dl>
       <dl>
        <h2>邮箱验证</h2><br>
        <dt><h3>邮箱：</h3></dt>
        <dd><input style="background-color:#efff;" type="text" name="question"  value="${encry_email}" /></dd>
        <div class="clears"></div>
       </dl>
       <dl class="sel-yzsj">
        <dt><h3>验证码：</h3></dt>
        <dd><input style="width:100px;background-color:#efff;" type="text" name="question" id="mycode" />
        <input id="sendcode" type="button" style="width:88px;height:34px;color:#efd;background-color:#4c4c4c;" value="发送验证码">
        </dd>
        <div class="clears"></div>
       </dl>

       <dl>
       </dl>
       <div class="subtijiao"><input id="submit_btn" type="button" value="提交" /></div>
      </form><!--forget-pwd/-->
   </div><!--web-width/-->
  </div><!--content/-->

<div class='bg'>
</div>

<div class='popus'>
   <h2>验证码输入错误！</h2>
   <div>
     <div class='right btn'>确定</div>
   </div>
</div>

<div class='popus5'>
   <h2>验证码已经发送！</h2>
   <div>
     <div class='right btn5'>确定</div>
   </div>
</div>

<div class='mask'></div>

</body>
</html>